<template>
  <div class="afterInvestDel-page .details-page">
    <pubChunk :mt="20">
      <span slot="title" class="line">
        <span
          class="showMonth_navList-item"
          :class="{
            'showMonth_navList-item_active': showMonth_navList_active == i,
          }"
          v-for="(item, i) in showMonth_navList"
          :key="i"
          @click="showMonthNavHandle(i)"
        >
          {{ item }}
        </span>
        <!-- <el-link
          type="primary"
          :underline="false"
          @click="dataType === 1 ? (dataType = 2) : (dataType = 1)"
        >
          <i class="el-icon-sort"></i>
          <span style="margin: 0;" v-show="dataType === 1">切换为贡献度</span>
          <span style="margin: 0;" v-show="dataType === 2">切换为收益率</span>
        </el-link> -->
      </span>
      <div slot="headLeft" class="cutTableChart_icon">
        <div class="line">
          <div class="showMonth">
            <div class="round round1"></div>
            <span class="proName_tof">{{ info.classfyName }}</span>
          </div>
          <div class="showMonth">
            <div class="round round2"></div>
            <el-select
              style="width: 130px"
              v-model="month_contrast"
              size="mini"
              clearable
              placeholder="请选择"
              @change="monthContrastHandle"
            >
              <el-option
                v-for="item in one_contrastOptions_list_parent"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div style="margin-left: 26px">
          <svg-icon
            icon-class="zhuzhuangtu"
            :class="{
              showMonth_cutIcon_active: showMonth_cutIcon_active == 1,
            }"
            @mouseenter="showMonthCutIcon(1)"
          />
          <svg-icon
            icon-class="caidan"
            :class="{
              showMonth_cutIcon_active: showMonth_cutIcon_active == 2,
            }"
            @mouseenter="showMonthCutIcon(2)"
          />
        </div>
      </div>
      <div class="showChunk">
        <!-- 月度收益 -->
        <el-table
          v-show="
            showMonth_navList_active == 3 && showMonth_cutIcon_active == 2
          "
          fit
          :data="list_showMonth"
          style="width: 100%"
          row-key="rowKey"
          size="mini"
          max-height="516"
          lazy
          :load="loadChildTable"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :cell-style="{ padding: '8px 0' }"
          :header-cell-style="{ color: '#333' }"
          :cell-class-name="showMonthTableClassName"
        >
          <el-table-column prop="year" label="年份" width="100" fixed="left">
            <template slot-scope="{ row }">
              <div style="cursor: default">{{ row.year }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="名称"
            prop="name"
            fixed="left"
            :width="maxNameWidth + 'px'"
          >
            <template slot-scope="{ row }">
              <div :title="row.name">
                <div
                  v-if="row.name.indexOf('[投资]') !== -1"
                  style="cursor: pointer; color: #1890ff; margin-left: 10px"
                  @click.stop="strategyDeltailHandle(row.id)"
                >
                  {{ row.name }}
                </div>
                <div v-else>{{ row.name }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            :label="`${i}月`"
            align="center"
            v-for="i in 12"
            :key="i"
          >
            <template slot-scope="{ row }">
              <span
                v-if="row[i + '_growthRate'] != null && dataType === 1"
                :class="
                  row[i + '_growthRate'] >= 0 ? 'positiveFc' : 'negativeFc'
                "
              >
                {{ row[i + "_growthRate"] }}%
              </span>
              <span
                v-else-if="
                  row[i + '_revenueContribution'] != null && dataType === 2
                "
                :class="
                  row[i + '_revenueContribution'] >= 0
                    ? 'positiveFc'
                    : 'negativeFc'
                "
              >
                {{ row[i + "_revenueContribution"] }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="YTD" align="center">
            <template slot-scope="{ row }">
              <span
                v-if="row['13_growthRate'] != null && dataType === 1"
                :class="row['13_growthRate'] >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row["13_growthRate"] }}%
              </span>
              <span
                v-else-if="
                  row['13_revenueContribution'] != null && dataType === 2
                "
                :class="
                  row['13_revenueContribution'] >= 0
                    ? 'positiveFc'
                    : 'negativeFc'
                "
              >
                {{ row["13_revenueContribution"] }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 季度收益 -->
        <div
          v-show="
            showMonth_navList_active == 2 && showMonth_cutIcon_active == 2
          "
          v-loading="listLoading_showMonth_table1"
          style="min-height: 200px"
        >
          <el-table
            class="pub_tableTree_maxBack"
            v-if="showMonth_table1.length"
            :data="showMonth_table1"
            fit
            row-key="rowKey"
            size="mini"
            max-height="516"
            :cell-style="{ padding: '8px 0' }"
            :cell-class-name="cellClass"
            :tree-props="{ children: 'children' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%"
          >
            <el-table-column width="30" fixed="left"> </el-table-column>
            <el-table-column
              prop="definition"
              label="名称/季度"
              fixed="left"
              :width="maxNameWidth + 'px'"
            >
              <template slot-scope="{ row }">
                <div :title="row.definition">
                  <div
                    v-if="row.definition.indexOf('[投资]') !== -1"
                    :style="{
                      'margin-left': row.ml + 'px',
                      cursor: 'pointer',
                      color: '#1890ff',
                    }"
                    @click.stop="strategyDeltailHandle(row.id)"
                  >
                    {{ row.definition }}
                  </div>
                  <div v-else>
                    {{ row.definition }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              :label="item.quarterName"
              align="center"
              min-width="160"
              v-for="(item, i) in showMonth_table1[0].list"
              :key="i"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null &&
                    scope.row.definition == '· 最大回撤'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    dataType === 1 &&
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null
                  "
                  :class="
                    scope.row.list[i].sumPnl >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    dataType === 2 &&
                    scope.row.list[i] &&
                    scope.row.list[i].revenueContribution != null
                  "
                  :class="
                    scope.row.list[i].revenueContribution >= 0
                      ? 'positiveFc'
                      : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].revenueContribution | toFixed2 }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 年度收益 -->
        <div
          v-show="
            showMonth_navList_active == 1 && showMonth_cutIcon_active == 2
          "
          v-loading="listLoading_showMonth_table2"
          style="min-height: 200px"
        >
          <el-table
            class="pub_tableTree_maxBack"
            v-if="showMonth_table2.length"
            :data="showMonth_table2"
            fit
            row-key="rowKey"
            size="mini"
            max-height="516"
            :cell-style="{ padding: '8px 0' }"
            :cell-class-name="cellClass"
            :tree-props="{ children: 'children' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%"
          >
            <el-table-column width="30" fixed="left"> </el-table-column>
            <el-table-column
              prop="definition"
              label="年份/名称"
              fixed="left"
              :width="maxNameWidth + 'px'"
            >
              <template slot-scope="{ row }">
                <div :title="row.definition">
                  <div
                    v-if="row.definition.indexOf('[投资]') !== -1"
                    :style="{
                      'margin-left': row.ml + 'px',
                      cursor: 'pointer',
                      color: '#1890ff',
                    }"
                    @click.stop="strategyDeltailHandle(row.id)"
                  >
                    {{ row.definition }}
                  </div>
                  <div v-else>
                    {{ row.definition }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              :label="item.quarterName"
              align="center"
              min-width="160"
              v-for="(item, i) in showMonth_table2[0].list"
              :key="i"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null &&
                    scope.row.definition == '· 最大回撤'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    dataType === 1 &&
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null
                  "
                  :class="
                    scope.row.list[i].sumPnl >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    dataType === 2 &&
                    scope.row.list[i] &&
                    scope.row.list[i].revenueContribution != null
                  "
                  :class="
                    scope.row.list[i].revenueContribution >= 0
                      ? 'positiveFc'
                      : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].revenueContribution | toFixed2 }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 区间收益-表格 -->
        <div
          v-show="
            showMonth_navList_active == 0 && showMonth_cutIcon_active == 2
          "
          v-loading="listLoading_showMonth_table3"
          style="min-height: 200px"
        >
          <el-table
            class="pub_tableTree_maxBack"
            v-if="showMonth_table3.length"
            :data="showMonth_table3"
            fit
            row-key="rowKey"
            size="mini"
            max-height="516"
            :cell-style="{ padding: '8px 0' }"
            :cell-class-name="cellClass"
            :tree-props="{ children: 'children' }"
            :header-cell-style="{ color: '#333' }"
            style="width: 100%"
          >
            <el-table-column width="30" fixed="left"> </el-table-column>
            <el-table-column
              prop="definition"
              label="名称/年份"
              fixed="left"
              :width="maxNameWidth + 'px'"
            >
              <template slot-scope="{ row }">
                <div :title="row.definition">
                  <div
                    v-if="row.definition.indexOf('[投资]') !== -1"
                    :style="{
                      'margin-left': row.ml + 'px',
                      cursor: 'pointer',
                      color: '#1890ff',
                    }"
                    @click.stop="strategyDeltailHandle(row.id)"
                  >
                    {{ row.definition }}
                  </div>
                  <div v-else>
                    {{ row.definition }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              :label="item.quarterName"
              align="center"
              min-width="80"
              v-for="(item, i) in showMonth_table3[0].list"
              :key="i"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null &&
                    scope.row.definition == '· 最大回撤'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    dataType === 1 &&
                    scope.row.list[i] &&
                    scope.row.list[i].sumPnl != null
                  "
                  :class="
                    scope.row.list[i].sumPnl >= 0 ? 'positiveFc' : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].sumPnl | toFixed2 }}%
                </span>
                <span
                  v-else-if="
                    dataType === 2 &&
                    scope.row.list[i] &&
                    scope.row.list[i].revenueContribution != null
                  "
                  :class="
                    scope.row.list[i].revenueContribution >= 0
                      ? 'positiveFc'
                      : 'negativeFc'
                  "
                >
                  {{ scope.row.list[i].revenueContribution | toFixed2 }}%
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 柱状图 -->
        <div class="month-chartContent">
          <div v-if="showMonth_cutIcon_active == 1" class="mChunk1">
            <month-return-chart
              v-if="info.classfyName"
              v-loading="list_monthNetWorthDistributed_loading"
              id="groupManageMonthReturnChart"
              :name_contrast="name_contrast"
              :chart_date="chart_date"
              :month_contrast="month_contrast"
              :y-name="info.classfyName"
              :data="list_monthNetWorthDistributed"
              :showMonth_navList_active="showMonth_navList_active"
              :height="400"
              width="100%"
            />
          </div>
        </div>
      </div>
    </pubChunk>
  </div>
</template>
<script>
import pubChunk from "@/components/investComn/pubChunk.vue";
// import { deepClone } from '@/utils'
import monthReturnChart from "@/components/Charts/barEcharts_monthReturn.vue";
import { getMonthlyIndex, findTimeScopeGrowth } from "@/api/policyManage";
import {
  findClassifyNetWorthMonthly,
  getSegmentClassifyNetWorthDistribute,
  getYearClassifyNetWorthDistribute,
  getQuarterClassifyNetWorthDistribute,
  findClassifyNetWorthMonthDistribute,
  findClassifyNetWorthExtendBySegment,
  getClassifyQuarter,
  getClassifySegment,
  getClassifyYear,
  classifyMonthlyIncreaseDialog,
  getStrategyClassifyExt,
} from "@/api/groupManage";
// import showMonthOpen from '@/views/other/showMonthOpen.vue'
import mixin from "./mixins";
import { getMaxLength } from "@/utils/pro";

export default {
  mixins: [mixin],
  components: {
    pubChunk,
    monthReturnChart,
    // showMonthOpen,
  },
  data() {
    return {
      dataType: 2,
      chart_date: [],
      info: {},
      list_monthNetWorthDistributed_loading: false,
      list_monthNetWorthDistributed: [],
      month_contrast: undefined,
      showMonth_navList: ["区间收益", "年度收益", "季度收益", "月度收益"],
      showMonth_navList_active: 0,
      showMonth_cutIcon_active: 2,
      list_showMonth: [],
      // list_showMonth_c: [],
      showMonth_table1: [],
      showMonth_table2: [],
      showMonth_table3: [],
      listLoading_showMonth_table1: false,
      listLoading_showMonth_table2: false,
      listLoading_showMonth_table3: false,
      name_contrast: "",
      maxNameWidth: 100,
      list_showMonth_profit: [],
      strategyPortfolioDetials: [],
    };
  },
  props: {
    chart_date_parent: {
      type: Object | Array,
    },
    contrastOptions_obj_parent: {
      type: Object | Array,
    },
    one_contrastOptions_list_parent: {
      type: Object | Array,
    },
    indexTypes: {
      type: String | Number,
      default: "",
    },
  },
  created() {},
  mounted() {},
  computed: {
    computedName() {
      if (
        this.combTreeStrategyId &&
        this.navActive == 2 &&
        this.showMonth_navList_active == 3
      ) {
        return this.combTreeStrategyName;
      } else {
        return this.info.compositionName;
      }
    },
  },
  watch: {
    chart_date_parent(val) {
      if (val) {
        this.chart_date = val;
      }
    },
    month_contrast(val) {
      if (val) {
        this.name_contrast = this.contrastOptions_obj_parent[val]; // 月度表现头部修改
      }
      this.showMonthNavHandle(this.showMonth_navList_active);
    },
    navActive: {
      handler(newVal, oldVal) {
        this.showMonth_table1 = [];
        this.showMonth_table2 = [];
        this.showMonth_table3 = [];
        this.showMonthNavHandle(this.showMonth_navList_active);
      },
    },
  },
  methods: {
    async init(info, dates) {
      this.info = info;
      this.chart_date = dates;
      await this.getStrategyClassifyExt();
      this.getClassifySegment();
      this.monthContrastHandle();
      this.getSegmentClassifyNetWorthDistribute();
    },
    getClassifySegment() {
      this.listLoading_showMonth_table3 = true;
      getClassifySegment({
        classifyId: this.classifyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        this.listLoading_showMonth_table3 = false;
        this.showMonth_table3 = this.segmentMaxBackHandle(res.body);
        this.maxNameWidth = this.flexColumnWidth(
          "名称/年份",
          "definition",
          this.showMonth_table3
        );
        console.log("区间收益-表格", this.showMonth_table3);
      });
    },
    getClassifyQuarter() {
      this.listLoading_showMonth_table1 = true;
      getClassifyQuarter({
        classifyId: this.classifyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
      }).then((res) => {
        this.listLoading_showMonth_table1 = false;
        console.log("季度收益-表格", res);
        this.showMonth_table1 = this.segmentMaxBackHandle(res.body);
      });
    },
    getClassifyYear() {
      this.listLoading_showMonth_table2 = true;
      getClassifyYear({
        classifyId: this.classifyId,
        indexTypes: this.month_contrast ? [this.month_contrast] : null,
        indexNames: this.name_contrast ? [this.name_contrast] : null,
      }).then((res) => {
        this.listLoading_showMonth_table2 = false;
        console.log("年度收益-表格", res);
        this.showMonth_table2 = this.segmentMaxBackHandle(res.body);
      });
    },
    getYearClassifyNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true;
      getYearClassifyNetWorthDistribute({
        classifyId: this.classifyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("年度收益", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    getQuarterClassifyNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true;
      getQuarterClassifyNetWorthDistribute({
        classifyId: this.classifyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("季度收益", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    getSegmentClassifyNetWorthDistribute() {
      this.list_monthNetWorthDistributed_loading = true;
      getSegmentClassifyNetWorthDistribute({
        classifyId: this.classifyId,
        indexType: this.month_contrast,
      }).then((res) => {
        console.log("区间收益", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    // 月度回报
    getMonthNetWorthDistributed(classifyId) {
      findClassifyNetWorthMonthDistribute({
        classifyId,
        userId: this.userId,
      }).then((res) => {
        console.log("月度回报", res);
        this.list_monthNetWorthDistributed_loading = false;
        this.list_monthNetWorthDistributed = res.body;
      });
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      if (indexType) {
        getMonthlyIndex({
          indexType,
          startTime: this.chart_date[0],
          endTime: this.chart_date[1],
        }).then((res) => {
          console.log("指数月度表现", res);
          const list = Object.keys(res.body)
            .map((i) => {
              return res.body[i];
            })
            .reverse();
          const indexTypeRow = this.one_contrastOptions_list_parent.filter(
            (item) => {
              return item.id === indexType;
            }
          )[0];
          const new_list = [];
          list.forEach((items, index) => {
            new_list[index] = {};
            items.map((el, j) => {
              const month = el.month || +el.indexTime.split("-")[1];
              new_list[index][month + "_growthRate"] = Number(
                el.indexGrowthRate
              );
              new_list[index][month + "_revenueContribution"] = null;
            });
            new_list[index].name = `[指数] ${indexTypeRow.name}`;
            new_list[index].year = items[0].year;
            new_list[index].hasChildren = false;
            new_list[index].hasClassify = false;
            new_list[index].rowKey = `[指数]${indexTypeRow.name}_${index}`;
            new_list[index].indexType = indexType;
          });
          const new_list_showMonth = [];
          for (let i = 0; i < this.list_showMonth.length; i++) {
            new_list_showMonth.push(this.list_showMonth[i]);
            if (new_list[i]) {
              new_list_showMonth.push(new_list[i]);
            }
          }
          this.list_showMonth = new_list_showMonth;
        });
      } else {
        this.name_contrast = "";
        this.month_contrast = undefined;
        this.list_showMonth = []; // 月度表现列表数据
        this.list_showMonth_profit = []; // 收益分布列表数据
        this.getMonthNetWorth(this.classifyId);
        this.findNetWorthExtendByStrategyId2(this.classifyId);
      }
    },
    // 切换月度表现nav
    showMonthNavHandle(i) {
      this.showMonth_navList_active = i;
      switch (i) {
        case 0:
          if (
            !this.showMonth_table3.length ||
            this.old_month_contrast3 != this.month_contrast
          ) {
            this.old_month_contrast3 = this.month_contrast;
            this.getClassifySegment();
          }
          this.getSegmentClassifyNetWorthDistribute();
          break;
        case 1:
          if (
            !this.showMonth_table2.length ||
            this.old_month_contrast2 != this.month_contrast
          ) {
            this.old_month_contrast2 = this.month_contrast;
            this.getClassifyYear();
          }
          this.getYearClassifyNetWorthDistribute();
          break;
        case 2:
          if (
            !this.showMonth_table1.length ||
            this.old_month_contrast1 != this.month_contrast
          ) {
            this.old_month_contrast1 = this.month_contrast;
            this.getClassifyQuarter();
          }
          this.getQuarterClassifyNetWorthDistribute();
          break;
        case 3:
          this.getMonthNetWorthDistributed(this.classifyId);
          break;
        default:
          break;
      }
    },
    // 历史月度表现
    getMonthNetWorth(classifyId) {
      findClassifyNetWorthMonthly({
        classifyId,
        userId: this.userId,
      }).then((res) => {
        const list = Object.keys(res.body)
          .map((i) => {
            return res.body[i];
          })
          .reverse();
        const new_list = [];
        list.forEach((items, index) => {
          new_list[index] = {};
          items.map((el, j) => {
            new_list[index][el.month + "_growthRate"] = Number(
              el.monthIncrease
            );
            new_list[index][el.month + "_revenueContribution"] = Number(
              el.revenueContribution
            );
          });
          new_list[index].name = "[分类] " + this.info.classfyName;
          new_list[index].year = items[0].year;
          new_list[index].hasChildren = true;
          new_list[index].hasClassify = true;
          new_list[index].rowKey = index * 2 + 1;
          new_list[index].compositionId = items[0].classifyId;
        });
        this.list_showMonth = new_list;
        console.log("月度收益table", this.list_showMonth);
      });
    },
    // 月度收益 tree 分类 or 投资
    async loadChildTable(row, treeNode, resolve) {
      let res = null;
      res = await classifyMonthlyIncreaseDialog({
        year: row.year,
        classifyId: this.classifyId,
      });
      const new_list = [];
      for (const key in res.body) {
        if (Object.hasOwnProperty.call(res.body, key)) {
          const new_obj = {};
          if (res.body[key]) {
            res.body[key].forEach((item, index) => {
              new_obj[item.month + "_growthRate"] = Number(item.monthIncrease);
              new_obj[item.month + "_revenueContribution"] = Number(
                item.revenueContribution
              );
            });
          }

          new_obj.name = `[投资] ${key}`;
          new_obj.rowKey = `${key}_${row.year}`;
          new_obj.id = res.body[key] ? res.body[key][0].strategyId : null;
          new_list.push(new_obj);
        }
      }
      console.log(row.year + "月度收益table", new_list);
      resolve(new_list);
    },
    // 收益分布 列表
    findNetWorthExtendByStrategyId2(classifyId) {
      this.findNetWorthExtendByStrategyId2_loading = true;
      findClassifyNetWorthExtendBySegment({
        classifyId,
        userId: this.userId,
      }).then((res) => {
        console.log("收益分布 列表", res);
        this.findNetWorthExtendByStrategyId2_loading = false;
        this.headTail(res.body);
        this.list_showMonth_profit = res.body;
      });
    },

    // 收益分布 列表 指数
    findTimeScopeGrowth(indexType) {
      console.log(this.chart_date);
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then((res) => {
        console.log("对比指数 收益分布 列表", res);
        this.headTail(res.body);
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth;
        });
        this.list_showMonth_key++;
      });
    },
    async getStrategyClassifyExt() {
      this.strategyPortfolioDetials = await getStrategyClassifyExt({
        classifyId: this.classifyId,
      }).then();
    },
    strategyDeltailHandle(id) {
      this.$router.push({
        path: `/afterManage/investList/details/${id}`,
      });
    },
    segmentMaxBackHandle(list) {
      let res = [];
      res = list.map((item, i) => {
        let prefixName = "";
        let ml = 0;
        let id = null;
        if (i === 0) {
          prefixName = "[分类] ";
        } else if (this.month_contrast && i === list.length - 1) {
          prefixName = "[指数] ";
        } else {
          id = item.list ? item.list[0].strategyId : null;
          prefixName = "[投资] ";
          ml = 10;
        }
        return {
          rowKey: i * 2 + 1,
          ...item,
          definition: `${prefixName}${item.definition}`,
          ml: ml,
          id: id,
          children: [
            {
              rowKey: i * 2 + 2,
              list: (() => {
                let res = [];
                res = item.list.map((el) => {
                  el.fixed =
                    el.quarterName === "今年以来"
                      ? "left"
                      : el.quarterName === "成立以来"
                      ? "right"
                      : false;
                  return {
                    quarterName: el.quarterName,
                    sumPnl: el.maxDown,
                    revenueContribution: el.revenueContribution,
                  };
                });
                return res;
              })(),
              definition: "· 最大回撤",
            },
          ],
        };
      });
      return res;
    },
    showMonthTableClassName({ row, columnIndex }) {
      if (columnIndex === 0) {
        if (row.indexType) {
          return "showMonthyearBorder1";
        }
        return "showMonthyearBorder0";
      }
      if (columnIndex === 1) {
        if (this.maxNameWidth === 400) {
          return "clamp2Ellipsis";
        }
        return "nowrap";
      }
    },
    headTail(list) {
      list.unshift(list[list.length - 1]);
      list.splice(list.length - 1, 1);
    },
    showMonthCutIcon(i) {
      this.showMonth_cutIcon_active = i;
    },
    /**
     * 表格数据单行显示内边距为0
     */
    cellClass(row) {
      if (
        (!row.column.label ||
          row.column.label === "名称/年份" ||
          row.column.label === "名称/季度") &&
        this.maxNameWidth < 400
      ) {
        return "cell-pad-0 nowrap";
      } else if (this.maxNameWidth >= 400) {
        return "cell-pad-0 clamp2Ellipsis";
      }
      return "";
    },
    /**
     * table column 自适应列宽
     * @param label 表名
     * @param prop 表格数据
     * @param tableData 表格数据
     */
    flexColumnWidth(label, prop, tableData) {
      const arr = tableData.map((x) => x[prop]);
      arr.push(label);
      if (getMaxLength(arr) + 25 >= 400) {
        return 400;
      }
      return getMaxLength(arr) + 25;
    },
  },
};
</script>

<style lang="scss" scoped>
.afterInvestDel-page {
  .title {
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
  }
  .line {
    display: flex;
    .showMonth {
      display: flex;
      align-items: center;
      & + .showMonth {
        margin-left: 15px;
      }
      .round {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
      }
      .round1 {
        background: #e16757;
      }
      .round2 {
        background: #78b2eb;
      }
    }
    .showMonth_navList-item {
      width: 100px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
      user-select: none;
      & + .showMonth_navList-item {
        margin-left: 10px;
      }
    }
    .showMonth_navList-item_active {
      background: #409eff;
      color: #fff;
    }
  }
  .month-chartContent {
    display: flex;
    .mChunk1 {
      width: 100%;
    }
  }
  .cutTableChart_icon {
    display: flex;
    align-items: center;
    color: #999;
    cursor: pointer;
    .svg-icon {
      font-size: 22px;
      & + .svg-icon {
        margin-left: 15px;
      }
    }
    .showMonth_cutIcon_active {
      color: #e1322d;
    }
  }
}
</style>
